<template>
	<zui-box>

		<!-- 头部导航 -->
		<zui-navbar title='添加地址'></zui-navbar>

		<u-form>
			<u-gap height="30rpx"></u-gap>
		
		
			<zui-flat>
				<u-gap height="15rpx"></u-gap>
				<zui-start padding="15rpx">
					<u-icon size='30rpx' :name="require('@/static/img/address_i01.png')"></u-icon>
					<view style="width: 20rpx;"></view>
					<zui-text size='30rpx' color='#F1B863'>收货人</zui-text>
				</zui-start>
				<zui-start padding="15rpx">
					<u-input v-model="name" shape='circle' placeholder="请输入收货人姓名" border="none" color="red" clearable>
					</u-input>
				</zui-start>
				<u-gap height="15rpx"></u-gap>
			</zui-flat>
		
		
			<u-gap height="30rpx"></u-gap>
		
			<!-- //平面盒子 -->
		
			<zui-flat>
				<u-gap height="15rpx"></u-gap>
				<zui-start padding="15rpx">
					<u-icon size='30rpx' :name="require('@/static/img/address_i02.png')"></u-icon>
					<view style="width: 20rpx;"></view>
					<zui-text size='30rpx' color='#F1B863'>手机号</zui-text>
				</zui-start>
				<zui-start padding="15rpx">
					<u-input v-model="phone" maxlength="11" shape='circle' placeholder="请输入收货人手机号" border="none" color='#fff'
						clearable>
					</u-input>
				</zui-start>
				<u-gap height="15rpx"></u-gap>
			</zui-flat>
		
			<u-gap height="30rpx"></u-gap>
		
		
			<zui-flat>
				<u-gap height="15rpx"></u-gap>
				<zui-start padding="15rpx">
					<u-icon size='30rpx' :name="require('@/static/img/address_i03.png')"></u-icon>
					<view style="width: 20rpx;"></view>
					<zui-text size='30rpx' color='#F1B863'>所在地区</zui-text>
				</zui-start>
				<zui-start padding="15rpx">
					<view @tap="showCityPicker">
						<u-input v-model="address_join" :readonly="true" shape='circle' placeholder="选择省市区"
							border="none" color='#fff' clearable>
						</u-input>
					</view>
				</zui-start>
				<u-gap height="15rpx"></u-gap>
			</zui-flat>
		
			<u-gap height="30rpx"></u-gap>
		
		
			<zui-flat>
				<u-gap height="15rpx"></u-gap>
				<zui-start padding="15rpx">
					<u-icon size='30rpx' :name="require('@/static/img/address_i03.png')"></u-icon>
					<view style="width: 20rpx;"></view>
					<zui-text size='30rpx' color='#F1B863'>详细地址</zui-text>
				</zui-start>
				<zui-col padding="0" height='auto'>
					<view class="opt" @click="opt_ress">
						<u-form-item>
							<u-input v-model="address" disabled disabledColor="#ffffff" placeholder="其他" border="none">
							</u-input>
							<u-icon slot="right" name="arrow-down"></u-icon>
						</u-form-item>
					</view>
		
					<zui-line v-if="!address"></zui-line>
					
					
					<zui-start padding="15rpx" v-if="!address">
						<u-input v-model="address2" shape='circle' placeholder="请输入详细地址" border="none" color='#fff'
							clearable>
						</u-input>
					</zui-start>
			
					<u-picker keyName="address" :closeOnClickOverlay='true' :show="showSex" @close='closeSex'
						@cancel='closeSex' @confirm='confirm' :columns="columns"></u-picker>
		
				</zui-col>
				<u-gap height="15rpx"></u-gap>
			</zui-flat>
		
		
		
			<u-gap height="30rpx"></u-gap>
		
			<zui-flat v-if="team_person">
				<u-gap height="15rpx"></u-gap>
				<zui-start padding="15rpx">
					<u-icon size='30rpx' :name="require('@/static/img/address_i01.png')"></u-icon>
					<view style="width: 20rpx;"></view>
					<zui-text size='30rpx' color='#F1B863'>团队人员</zui-text>
				</zui-start>
				<zui-start padding="15rpx">
					<u-input v-model="team_person" :readonly="true" shape='circle' border="none" color='#fff'></u-input>
				</zui-start>
				<u-gap height="15rpx"></u-gap>
			</zui-flat>
			<!-- //平面盒子 -->
		
		</u-form>
		
		
		<u-gap height="70rpx"></u-gap>
		
		
		<zui-button bgColor='#AA334F' @fun='save'>保存</zui-button>
		
		
		<!-- 重新起了个名字 -->
		<uni-city ref="unicity" :pickerValueDefault="pickerValueDefault" @onChange="onChange" @onCancel="onCancel"
			@onConfirm="onConfirm"></uni-city>





	</zui-box>
</template>

<script>
	export default {
		data() {
			return {
				name: '',//收货人
				phone: '',//手机号
				
				pro_name: '',
				city_name: '',
				area_name: '',
				pro_id: '',
				city_id: '',
				area_id: '',
				pickerValueDefault: [0, 0, 1],
				address_join: '', //省市区
				address: '', //详细地址
				address2: '', //详细地址
				is_default: 1, //是否默认
				addressShow: false,
				
				showSex: false,
				
				sex: '',
				columns: [],
				
				team_person:'',//团队人员
			};
		},
		created() {

		},
		methods: {
			// 选择街道
			opt_ress(){
				if(this.columns[0]?.length>0){
					console.log(this.columns)
					this.showSex = true;
				}
				
			},
			showCityPicker: function() {
				this.$refs.unicity.show();
			},
			onChange(e) {},
			onCancel(e) {},
			onConfirm(e) {
				console.log('地址',e);
				this.address_join = e.label;
				this.pro_id = `${e.sheng}0000`;
				this.city_id = `${e.shi}00`;
				this.area_id = e.qu;
				
				this.pro_name  = e.sheng_name;
				this.city_name  = e.shi_name;
				this.area_name  = e.qu_name;
				this.get_team();
				this.address='';
				this.address2='';
				this.team_person='';
			},
			closeSex(){
				this.showSex = false;
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				this.address = e.value[0].address;
				this.team_person = e.value[0].team_person;
				this.showSex = false;
			},
			//team_person:'',//团队人员
			get_team(){
				// 基本用法，注意：get请求的参数以及配置项都在第二个参数中
				uni.$u.http.get('/app/address/listAdmin', {
					params: {
						pro_id:this.pro_id,
						city_id:this.city_id,
						area_id:this.area_id,
					},
					custom: {
						auth: true,
						toast: true,
						catch: false,
					},
				}).then(res => {
					console.log('获取分类',res);
					this.columns=[];
					this.columns.push(res);
					
					
					// address: "软件园"
					// team_person: "20"
					
					
					// this.team_person = res;
				}).catch(err => {
					
				})
				
				
			},
			
			save(){
				// 保存地址
				uni.$u.http.post('/app/address/add', {
					pro_id:this.pro_id,
					city_id:this.city_id,
					area_id:this.area_id,
					
					pro_name:this.pro_name,
					city_name:this.city_name,
					area_name:this.area_name,
					address:this.address || this.address2,
					name:this.name,
					phone:this.phone,
					is_default:this.is_default,
					team_person:this.team_person,
					
				},{
					custom:{
						auth: true,
						toast: true,
						catch: false,
					}
				}
				
				).then(res => {
					
					//加入购物车成功
					this.say('保存成功')
					this.xz_back()
					
					
				}).catch(err => {})
				
				
				
				
			},
			
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
		}
	}
</script>

<style lang='scss' scoped>
	.cell {
		/deep/.u-cell__body {
			padding: 0 !important;
		}

		/deep/.u-cell__title-text {
			color: #F1B863 !important;
		}
	}


	/deep/.u-input__content__field-wrapper__field {
		height: 60rpx !important;
		color: #303133 !important;
		font-size: 26rpx !important;
	}
	
	
	/deep/.u-input{
		background-color: transparent !important;
		font-size: 24rpx !important;
	}
	
	
</style>
